<template>
  <div class="mt-5 bg-green-300 p-5" title="父组件" :can-expan="false">
    <h3>祖-组件</h3>
    <ul>
      <li>普通对象 name:{{ name }}</li>
      <li>响应对象 car:{{ car }}</li>
      <li>响应对象 aliasName:{{ name }}</li>
      <li>接收子回调数据:{{ data }}</li>
    </ul>

    <Father :name="name" :car="car" :setData="setData" ext="普通参数" :aliasName="name" />
  </div>
</template>
<script lang="ts" setup>
  import Father from './Father.vue';
  import { ref } from 'vue';

  // 普通对象: 不具有响应式
  let name: string = 'hello';

  // 响应对象: 孙组件修改同步修改
  let car = ref({
    brand: '奔驰',
    price: 20,
  });

  // 存储孙组件回调数据
  let data = ref();

  // 接受孙组件回调
  function setData(callBackData: string) {
    data.value = callBackData;
  }
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }

  li {
    margin-top: 10px;
  }

  div {
    border-radius: 10px;
  }
</style>
